<!-- 代理人月销售额列表查询 -->
<template>
  <div class="app-container">
    <!-- header -->
    <el-card>
      <div slot="header" class="header">
        <span>代理人月销售额</span>
      </div>
      <div style="marginTop:20px" class="filter-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="月份">
            <el-date-picker v-model="searchData.month" type="month" placeholder="选择月" value-format="yyyy-MM">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="searchData.nickName" clearable></el-input>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch">查询</el-button>
        </el-form>
      </div>
    </el-card>
    <!-- body -->
    <el-card style="marginTop:20px">
      <div class="table-wrapper">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="流水号" width="100" fixed/>
          <el-table-column prop="month" label="月份" width="150"  fixed/>
          <el-table-column prop="nickName" label="客户名称" min-width="150" fixed/>
          <el-table-column prop="avatarUrl" label="客户头像" min-width="150">
            <template slot-scope="scope">
              <el-avatar shape="square" :size="100" fit="cover" :src="scope.row.avatarUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="levelAmount" label="销售额达到等级额度" min-width="150" />
          <el-table-column prop="levelRatio" label="销售额达到等级提成比例" min-width="180" />
          <el-table-column prop="selfAgentProfit" label="自己代理提成收入" min-width="150" />
          <el-table-column prop="selfLeadProfit" label="自己领导奖收入" min-width="150" />
          <el-table-column prop="selfProfit" label="自己所有收入" min-width="150" />
          <el-table-column prop="selfSaleAmount" label="自己销售额" min-width="150" />
          <el-table-column prop="totalAgentProfit" label="总代理提成收入" min-width="150" />
          <el-table-column prop="totalSaleAmount" label="总销售额 " min-width="150" />
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :page-count="Math.ceil(this.pageInfo.total / this.pageInfo.pageSize)"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      pageInfo: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 展示数量
        total: 1, // 总记录数
      },
      tableData: [],

      searchData: {
        nickName: '',
        month: '',
      },
    };
  },
  created() {},
  mounted() {
    this.getMonthProfitList();
  },
  computed: {},
  methods: {
    /**
     * 搜索
     */
    onClickSearch() {
      this.pageInfo.pageNum = 1;
      this.getMonthProfitList();
    },

    /**
     * 当前页变更
     */
    currentChange(val) {
      this.pageInfo.pageNum = val;
      this.getMonthProfitList();
    },

    async getMonthProfitList() {
      const params = {
        ...{
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          needTotalCount: true,
        },
        ...this.searchData,
      };
      try {
        const response = await this.$api.getMonthProfitList(params);
        this.tableData = response.data;
        this.pageInfo.total = response.total;
      } catch (error) {
        this.tableData = [];
      }
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
